<template>
  <div :id="chartId" style="width: 250px;height:250px;"></div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  props: {
    chartId: String,
    chartData: Object,
    height: String
  },
  mounted () {
    console.log(this.chartId)
    console.log(this.chartData)
    this.$nextTick(() => {
      this.drawLine()
    })
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(this.chartId))
      // 绘制图表
      let option = {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        series: [
          {
            name: this.chartData.legendData,
            type: 'gauge',
            data: this.chartData.data,
            detail: {
              backgroundColor: 'red'
            },
            axisLine: {
              lineStyle: {
                color: [[0.3, 'red'], [0.7, 'yellow'], [1, 'green']],
                width: 10 // 这个是修改宽度的属性
              }
            },
            itemStyle: {
              normal: {
                color: 'green',
                borderColor: 'yellow',
                borderWidth: '5px',
                label: {
                  show: true,
                  textStyle: {
                    color: 'pink',
                    fontSize: '40px'
                  }
                }
              }
            }
          }
        ]
      }
      myChart.setOption(option, true)
    }
  }
}
</script>
